<template>
    <div class="msg-item">
        <div class="title"
            v-if="msg.msgType != 0"
            :style="{flexDirection: justifyType==='left' ? 'row' : 'row-reverse'}"
        >
            <div class="user"
                :style="{color: userColor}"
            >   
                <strong>{{ msg.sentByName }}</strong>
            </div>
            <div class="time" v-if="showSendTime">
                {{ DateFormatter.format(new Date(msg.sentAt), sendTimeFormat) }}
            </div>
        </div>
        <div class="content"
            :style="{flexDirection: justifyType==='left' ? 'row' : 'row-reverse'}"
            v-if="msg.msgType != 0"
        >
            <div class="content-detail" v-html="msg.content"
                :style="{backgroundColor: msgBgColor}"
                @click="$emit('clickMsg',msg)"
                @contextmenu.prevent="handleMsgRc($event, msg)"
            ></div>
        </div>
        <div class="sys-msg-content" v-if="msg.msgType === 0">
            <span>{{ msg.content }}</span>
        </div>
        <div class="quote-msg-content"
            :style="{flexDirection: justifyType==='left' ? 'row' : 'row-reverse'}"
            v-if="msg.extData && JSON.parse(msg.extData).hasQuoteMsg"
        >
            <el-popover 
                placement="right" 
                trigger="click"
                width="auto"
                :enterable="true"
                v-if="JSON.parse(msg.extData).quoteMsg.msgType===1"
            >
                <template #reference>
                    <span class="quote-content-detail ellipsis-text" v-html="JSON.parse(msg.extData).quoteMsgHtml"></span>
                </template>
                <div v-html="JSON.parse(msg.extData).quoteMsg.content"></div>
            </el-popover>
            <span v-else 
                class="quote-content-detail" 
                v-html="JSON.parse(msg.extData).quoteMsgHtml"
                @click="$emit('clickQuoteMsg', JSON.parse(msg.extData).quoteMsg)"
            ></span>
        </div>
    </div>
</template>

<script setup>
import { defineProps,defineEmits } from 'vue';
import DateFormatter from '@/utils/dateFormatter';
// 定义props
const props = defineProps({
    // 消息
    msg:{
        type:Object,
        required:true
    },
    // 展示发送时间
    showSendTime:{
        type:Boolean,
        default:false
    },
    // 消息发送时间格式
    sendTimeFormat:{
        type:String,
        default:'yy-MM-dd HH:mm'
    },
    // 对齐方式（left、right）
    justifyType:{
        type:String,
        default:'left'
    },
    // 用户背景颜色
    userColor:{
        type:String,
        default:'black'
    },
    // 消息背景颜色
    msgBgColor:{
        type:String,
        default:'transparent'
    }
})

// 定义事件
const emits = defineEmits({
    // 点击消息
    'clickMsg':null,
    // 点击引用消息
    'clickQuoteMsg':null,
    // 右击消息
    'rightClickMsg':null
})


// 处理消息内容右键事件
const handleMsgRc = (event, msg) => {
    emits('rightClickMsg', event, msg)
}

</script>

<style scoped lang="scss">
.msg-item{
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    & > .title{
        display: flex;
        margin-bottom: 2px;
        & > div{
            display: flex;/**设置user、time的文字都靠底部对齐 */
            flex-direction: column;
            justify-content: end;
        }
        & > .user{
            font-size: 14px;
            margin: 0px 5px;
        }
        & > .time{
            font-size: 8px;
            color: gray;
            padding-bottom: 1.5px;
        }
    }
    & > .content{
    display: flex;
        // 通过:style动态设置主轴方向，是自己发的消息统一靠右，否则靠左
        & > .content-detail{
            display: inline-block;
            max-width: 60%;
            margin: 0 5px;
            padding: 3px;
            // border-radius: 3px;
            font-size: 14px;
            white-space: pre-wrap; /* 保留空格和换行符 */
            font-family: monospace; /* 使用等宽字体 */
        }
    }
    & > .sys-msg-content{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        & > span{
            font-size: 10px;
            color: gray;
        }
    }
    & > .quote-msg-content{
        padding: 3px 5px;
        display: flex;
        font-size: 12px;
        & .quote-content-detail{
            padding: 5px;
            background-color: #E8E8E8;
            color: #797979;
            max-width: 400px;
            border-radius: 1.5px;
        }
    }

}
</style>